﻿@{
    ViewBag.Title = "包护脚配置";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
    var workOrderNo = ViewBag.WorkOrderNo as string;
    var lines = ViewBag.Lines as List<IOA.MES.DataAccess.VModel.VAssemblyLine>;
}
@model IOA.MES.DataAccess.VModel.VWorkOrder

@section Contents{
    <style>
        .tag {
            float: left;
            padding: 5px 10px;
            background-color: #F6F6F6;
            border: 1px solid #C6C6C6;
            border-radius: 5px;
            margin-right: 10px;
        }

            .tag i {
                margin-left: 5px;
                cursor: pointer;
                color: #FF5722;
            }
    </style>
}

<div style="background-color:white;padding:10px;margin:15px">
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:150px;">绑定产线</label>
                <div class="layui-input-inline" style="width:500px;">
                    <select name="lineId" lay-filter="selLines">
                        <option value="0">不绑定</option>
                        @foreach (var line in lines)
                        {
                            <option value="@line.PkId">@line.LineName</option>
                        }
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn " lay-submit lay-filter="submit">保存</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label" style="width:150px;"></label>
                <div class="layui-input-inline" style="width:500px;">
                    <div id="page"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/template" id="tplPage">
    <div>
        <div v-for="(line, index) in lines" class="tag" @@click="delLine(index)">
            {{line.LineName}}<i class="layui-icon">&#xe640;</i>
        </div>
    </div>
</script>


@section Scripts{
    <script>
        var vm = new Vue({
            el: "#page",
            template: "#tplPage",
            data: {
                allLines: @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(lines)),
                workOrder:  @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)),
                lines: []
            },
            mounted() {
                var lineIds = this.workOrder.LineId.split(',').map((e) => parseInt(e));
                if (lineIds.length > 0) {
                    var lines = new Array();
                    for (var i = 0; i < this.allLines.length; i++) {
                        if (lineIds.indexOf(this.allLines[i].PkId) > -1) {
                            lines.push(this.allLines[i]);
                        }
                    }
                    this.lines = lines;
                }
            },
            methods: {
                delLine(index) {
                    this.lines.splice(index, 1);
                }
            }
        });

        initLayui();
        function initLayui() {
            layui.use(['form', 'layer'], function () {
                var layer = layui.layer,
                    form = layui.form;

                form.on('select(selLines)', function (data) {
                    var line = vm.$data.allLines.find(function (e) {
                        return e.PkId == parseInt(data.value);
                    });
                    if (vm.$data.lines.find((e) => { return e.PkId == line.PkId; }) == null) {
                        vm.$data.lines.push(line);
                    }
                });

                form.on('submit(submit)', function (data) {
                    var loadId = layer.load();
                    $.ajax({
                        async: false,
                        url: "/ParaSetting/SaveBindLine",
                        data: {
                            workOrderNo: vm.$data.workOrder.WorkOrderNo,
                            lineIds: vm.$data.lines.map((e) => e.PkId)
                        },
                        complete: function () {
                            layer.close(loadId);
                        },
                        success: function (res) {
                            if (res.ErrCode != 200) {
                                layer.msg(res.ErrMsg, { icon: 5 });
                                return;
                            }
                            layer.msg("保存成功！", { icon: 6, time: 1500 });
                        }
                    });
                    return false;
                });
            });
        }
    </script>
}